<template>
    <body>
        <div class="threeimg">
            <div class="img1"></div>
            <div class="img2"></div>
            <div class="img3"></div>
        </div>
        <div class="list-container">
            <div class="list-item">
                <div class="titlel">
                    <h3>招标预览</h3>
                    <router-link class="xinxi" to="/gonggao">更多>> </router-link>
                </div>
                <div class="news">
                    <ul>
                        <li><img src="./images/主页/u19.png" /> 【麻城市中心】麻城经济开发区谌家园小学...</li>
                        <li><img src="./images/主页/u19.png" /> 【麻城市中心】麻城市农村公路管理局招标...</li>
                        <li><img src="./images/主页/u19.png" /> 【麻城市中心】麻城经济开发区谌家园小学...</li>
                        <li><img src="./images/主页/u19.png" /> 【汉川市中心】汉川电厂四期扩建工程电力...</li>
                        <li><img src="./images/主页/u19.png" /> 【红安县中心】红安县2023年度小型水库安...</li>
                    </ul>
                    <ul>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                    </ul>
                </div>            
            </div>
            <div class="list-item">
                <div class="titlel">
                    <h3>招标公示</h3>
                    <router-link class="xinxi" to="/gonggao">更多>> </router-link>
                </div>
                <div class="news">
                    <ul>
                        <li><img src="./images/主页/u19.png" /> 平煤隆基新能源科技有限公司--二期电...</li>
                        <li><img src="./images/主页/u19.png" /> 【2023年第4批电气杂项备件询比价采购...</li>
                        <li><img src="./images/主页/u19.png" /> 平煤隆基新能源科技有限公司一二期...</li>
                        <li><img src="./images/主页/u19.png" /> 囚云南省中医医院污水运维项目咨询邀请公告</li>
                        <li><img src="./images/主页/u19.png" /> 平煤隆基新能源科技有限公司一动力厂房...</li>
                    </ul>
                    <ul>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                    </ul>
                </div>  
            </div>
        </div>
        <div class="list-container">
            <div class="list-item">
                <div class="titlel">
                    <h3>中标公示</h3>
                    <router-link class="xinxi" to="/gonggao">更多>> </router-link>
                </div>
                <div class="news">
                    <ul>
                        <li><img src="./images/主页/u19.png" /> 山东省淄博市山东鑫泉医药有限公司线路迁...</li>
                        <li><img src="./images/主页/u19.png" /> 张家界旅游学校关于果盆/果盘/果篮的网上...</li>
                        <li><img src="./images/主页/u19.png" /> 长沙市芙蓉区朝阳小学关于其他广告服务的...</li>
                        <li><img src="./images/主页/u19.png" /> 沙沟村特色农畜产品电商综合服务中心建设...</li>
                        <li><img src="./images/主页/u19.png" /> 涟源市工贸中专关于LED头灯的网上超市采...</li>
                    </ul>
                    <ul>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                    </ul>
                </div>  
            </div>
            <div class="list-item">
                <div class="titlel">
                    <h3>企业采购</h3>
                    <router-link class="xinxi" to="/gonggao">更多>> </router-link>
                </div>
                <div class="news">
                    <ul>
                        <li><img src="./images/主页/u19.png" /> 慈利县三合镇国太桥中学关于新鲜水果的...</li>
                        <li><img src="./images/主页/u19.png" /> 兰陵县第七中学七中2023年保安经费成交公告</li>
                        <li><img src="./images/主页/u19.png" /> (XJ023041300027)CG-连接器询价</li>
                        <li><img src="./images/主页/u19.png" /> 岳阳县公安局关于机械硬盘的网上超市采购...</li>
                        <li><img src="./images/主页/u19.png" /> 青州市机关事务服务中心车辆保险成交公告</li>
                    </ul>
                    <ul>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                        <li>2023-04-13</li>
                    </ul>
                </div>  
            </div>
        </div>
    </body>
</template>

<script>
</script>
  
<style>
.ind {
    display: flex;
    align-items: center;
}

.Logo {
    height: 40px;
    width: 40px;
    background-image: url(images/主页/u128.png);
    background-size: 100% 100%;
}

.inde {
    display: flex;
    align-items: center;
}

.inde h2 {
    margin-left: 20px;
}

.admin {
    height: 40px;
    width: 40px;
    background-image: url(images/主页/u122.png);
    background-size: 100% 100%;
}

.threeimg {
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.img1 {
    background-image: url(images/主页/u9.png);
    background-size: 100% 100%;
    height: 250px;
    width: 300px;
}

.img2 {
    background-image: url(images/主页/u7.svg);
    background-size: 100% 100%;
    height: 250px;
    width: 1000px;
}

.img3 {
    background-image: url(images/主页/u8.png);
    background-size: 100% 100%;
    height: 250px;
    width: 300px;
}

.list-container {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    margin: 50px;
}

.list-item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    border-radius: 10px; 
    padding: 20px; 
    width: 44%;
    padding: 0px;
    box-sizing: border-box;
}

.list-item h3 {
    margin: 0 0 10px;
    margin-left: 10px;
    margin-top: 10px;
    float: left;
}

.list-item ul {
    list-style: none;
    padding: 0;
}

.list-item li {
    margin: 20px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.list-item li img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.list-item a {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    text-decoration: none;
    color: gray;
}

.titlel{
    height: 50px;
    width: auto;
    color: white;
    background-image: url(images/主页/u12.png);
    background-size: 100% 100%;
}

.news{
    display: flex;
    justify-content: space-between;
}
</style>
  